<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./grid_files/page_mp_article_improve24f185.css">
    <link rel="stylesheet" type="text/css" href="./grid_files/not_in_mm24ed02.css">
    <link rel="stylesheet" type="text/css" href="./grid_files/page_mp_article_improve_combo24f185.css">

    <link rel="stylesheet" href="css/buttons-min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./grid_files/class236751.js" type="text/javascript" ></script>
    <script src="./grid_files/index24d070.js" type="text/javascript" ></script>
    
    <script type="text/javascript" src="canvg/rgbcolor.js"></script> 
    <script type="text/javascript" src="canvg/StackBlur.js"></script>
    <script type="text/javascript" src="canvg/canvg.js"></script> 
    <script type="text/javascript" src="js/two.js"></script> 
    <script type="text/javascript" src="js/date.js"></script>
   
    <title>制作你的人生格子</title>
        

        <style >
            .en-markup-crop-options { top: 18px !important; left: 50% !important;
            margin-left: -100px !important; width: 200px !important; border: 2px rgba(255,255,255,.38)
            solid !important; border-radius: 4px !important; } .en-markup-crop-options
            div div:first-of-type { margin-left: 0px !important; }
            select{height: 30px;width: 85px;margin-left: 2px;font-size: 16px}
            .grid{font-family:"Arial";min-height:800px;font-size: 20px;margin: 5px;}
            p{margin-top: 8px}
            a{display: block;}
            .rich_media_meta_list{margin-bottom: 0;padding: 0}
            #imgdiv{margin-top: 10px;}
        </style>
        
    </head>
    
    <body id="activity-detail" class="zh_CN not_in_mm" ontouchstart="">
        <div id="js_article" class="rich_media">
            <div class="rich_media_inner">
                <div id="page-content">
                    <div id="img-content" class="rich_media_area_primary">
                        <h2 class="rich_media_title" id="activity-name">
                            我的人生格子
                        </h2>
                        <div class="rich_media_meta_list">
                            <em id="post-date" class="rich_media_meta rich_media_meta_text">2015-04-13</em>
                            <a class="rich_media_meta rich_media_meta_link rich_media_meta_nickname" href="javascript:void(0);" id="post-user">大美千品</a>
                        <span class="rich_media_meta rich_media_meta_text rich_media_meta_nickname">大美千品</span>

                        <div id="js_profile_qrcode" class="profile_container" style="display: none;">
                            <div class="profile_inner">
                                <strong class="profile_nickname">大美千品</strong>
                                <img class="profile_avatar" id="js_profile_qrcode_img" src="./grid_files/qrcodegh.jpg" alt="">

                                <p class="profile_meta">
                                <label class="profile_meta_label">微信号</label>
                                <span class="profile_meta_value">dameiqianpin</span>
                                </p>

                                <p class="profile_meta">
                                <label class="profile_meta_label">功能介绍</label>
                                <span class="profile_meta_value">发现新疆美食、追溯原产地、全程跟踪报道，致力于将新疆特色产品走出新疆、让更多的人爱上新疆美食。</span>
                                </p>
                                
                            </div>
                            <span class="profile_arrow_wrp" id="js_profile_arrow_wrp" style="left: 31.5px;">
                                <i class="profile_arrow arrow_out"></i>
                                <i class="profile_arrow arrow_in"></i>
                            </span>
                        </div>
                    </div>

                        
                    </div>

                    <div class="grid">
                        <p id="tip"></p>
                        <p>我的生日：<input id="birth" type="hidden" value="1991-03" placeholder="出生年月" >  
                            <select id="yyyy-birth" name="YYYY " onchange="YYYYMM(this.id,this.value)"> <option value="">请选择 年</option> </select> 
                           <select id="mm-birth" name="MM " onchange="MMDD(this.id,this.value)"> <option value="">选择 月</option> </select> 
                        </p>
                        <p>标题：<input id="describe" type="text" value="" placeholder="和某人谈了一场恋爱，看起来是这样的" style="width: 250px;height: 20px"></p>
                        <p>开始时间：<input id="start" type="hidden" value="1991-03" placeholder="出生年月" >  
                            <select id="yyyy-start" name="YYYY " onchange="YYYYMM(this.id,this.value)"> <option value="">请选择 年</option> </select> 
                           <select id="mm-start" name="MM " onchange="MMDD(this.id,this.value)"> <option value="">选择 月</option> </select> 
                        </p>
                        <p>结束时间：<input id="end" type="hidden" value="1991-03" placeholder="出生年月" >  
                            <select id="yyyy-end" name="YYYY " onchange="YYYYMM(this.id,this.value)"> <option value="">请选择 年</option> </select> 
                           <select id="mm-end" name="MM " onchange="MMDD(this.id,this.value)"> <option value="">选择 月</option> </select> 
                        </p>

                        <p> <button id="tosvg" class="button-secondary pure-button">生成</button> <button id="clear" class="button-secondary pure-button" style="margin-left: 40px">清空</button></p>

                        <div id="svgdiv"></div>
                        <canvas id="canvas" style="border:1px solid #d3d3d3;background:#ffffff;">
                        Your browser does not support the HTML5 canvas tag.
                        </canvas>
                        <div id="imgdiv"></div>
                    </div>


                    
                    


                </div>
                <div id="js_pc_qr_code" class="qr_code_pc_outer" style="display: block;">
                    <div class="qr_code_pc_inner">
                        <div class="qr_code_pc">
                            <img id="js_pc_qr_code_img" class="qr_code_pc_img" src="./grid_files/qrcodegh.jpg">
                            <p>
                                微信扫一扫
                                <br>
                                关注该公众号
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   <script>
    var svgdiv = $("svgdiv");
    var canvas = $("canvas");
    var imgdiv = $("imgdiv");
    var colors = new Array("#000079","#AE0000","#930093","#921AFF","#00CACA","#00A600","#8CEA00","#FFD306","#F75000","#984B4B","#AE57A4");
    hide(svgdiv);
    hide(canvas);
    hide($("tip"));
    var year  = new Date().getFullYear();
    var mon = new Date().getMonth()+1;

    initYYYY($("yyyy-birth"));
    initYYYY($("yyyy-start"));
    initYYYY($("yyyy-end"),year-50,year,year);
    initMM($("mm-birth"));
    initMM($("mm-start"));
    initMM($("mm-end"),mon);

    $("clear").onclick = function(){
        imgdiv.innerHTML = "";
    }
    $("tosvg").onclick = function(){
        var birth = $("birth").value;
        var start = $("start").value;
        var end = $("end").value;
        var text = $("describe").value;

        svgdiv.innerHTML = "";
        
        var swidth = svgdiv.offsetWidth ;
        var sheight;
        var wwidth = window.screen.width;
        var gridCount = 30;



        if(swidth && swidth>200 && swidth<640){
            swidth = swidth;
        }else if(wwidth<330 && wwidth>200){
            swidth = 300;
        }else if(wwidth>700){
            swidth = 630;
        }else{
            swidth = 300;
        }
        if(browser.versions.android || browser.versions.phone){
            swidth = 320;
        }
        var fontWidth = 20;
        sheight = swidth +fontWidth;
        if($("tip")){
            $("tip").innerHTML ="window:"+window.screen.width+ ",swidth:"+swidth+",sheight:"+sheight+","+is_weixn();
        }
        var params = { width: swidth, height: sheight };
        var two = new Two(params).appendTo(svgdiv);
        //two.makeLine(x1, y1, x2, y2);
        var cellWidth = swidth/gridCount;

        //two.makeRectangle(x, y, width, height);
/*      console.log("swidth:"+swidth+",sheight:"+sheight);
        var rect =two.makeRectangle(320, 30, 640, 30);
        rect.linewidth = 0;
        rect.fill = 'rgb(0, 200, 255)';
        two.update();*/
        
        var monthStart = calcMouth(birth,start);   //开始的格子数 第？月  start - birth
        var monthLength = calcMouth(start,end);  //需要绘画长度 一共?月 end - start
        var colStart = monthStart%gridCount;       //开始的列数 第?列
        var rowStart = (monthStart-colStart)/gridCount ;   //开始的行数 第?行
        //var colLeft  = gridCount - colStart;                  //绘画行 剩余的列数
        var rowCount = Math.ceil((monthLength + colStart)/gridCount);  //需要绘画的行数
        var colCount = 0;
        var colorIndex = Math.floor(Math.random() * (10));
        //#ffffff
        var rectback =two.makeRectangle(swidth/2,sheight/2,swidth,sheight);
        rectback.linewidth = 0;
        rectback.fill = "#ffffff";

        if(rowCount<2 && rowCount>0){
            colCount = monthLength;
            var rect =two.makeRectangle(colStart*cellWidth+colCount*cellWidth/2,rowStart*cellWidth+fontWidth+rowCount*cellWidth/2, colCount*cellWidth, rowCount*cellWidth);
            rect.linewidth = 0;
            rect.fill = colors[colorIndex];
            monthLength = monthLength - colCount*rowCount;
        }else {
            //part 1
            colCount = gridCount - colStart;
            rowCount = 1;
            var rect1 =two.makeRectangle(colStart*cellWidth+colCount*cellWidth/2,rowStart*cellWidth+fontWidth+rowCount*cellWidth/2, colCount*cellWidth, rowCount*cellWidth);
            rect1.linewidth = 0;
            rect1.fill = colors[colorIndex];
            monthLength = monthLength - colCount*rowCount;
            rowStart = rowStart + rowCount;
            colStart = 0;
            //monthLength = monthLength - colCount;
            //part 2
            var colLeft = monthLength % 30;
            rowCount = (monthLength - colLeft)/30;
            colCount = gridCount;
            var rect2 =two.makeRectangle(colStart*cellWidth+colCount*cellWidth/2,rowStart*cellWidth+fontWidth+rowCount*cellWidth/2, colCount*cellWidth, rowCount*cellWidth);
            rect2.linewidth = 0;
            rect2.fill = colors[colorIndex];
            monthLength = monthLength - colCount*rowCount;
            rowStart = rowStart + rowCount;
            colStart = 0;
            //monthLength = monthLength - colCount;
            //part 3
            rowCount = 1;
            colCount = colLeft;
            var rect3 =two.makeRectangle(colStart*cellWidth+colCount*cellWidth/2,rowStart*cellWidth+fontWidth+rowCount*cellWidth/2, colCount*cellWidth, rowCount*cellWidth);
            rect3.linewidth = 0;
            rect3.fill = colors[colorIndex];
            monthLength = monthLength - colCount*rowCount;
        }

        for(i=0;i<30;i++){
            two.makeLine(0, 20+i*cellWidth, two.width, 20+i*cellWidth);
            two.makeLine(i*cellWidth, 20, i*cellWidth, two.width+20);
        }
        two.update();

        canvg("canvas", $("svgdiv").innerHTML);
        var text = $("describe").value;
        var ctx = canvas.getContext("2d");
        ctx.fillText(text,5,12);

        var timestamp = (new Date()).valueOf(); 
        var fileName = "img"+timestamp+".png";

        var imgdata  = canvas.toDataURL("image/png");
        var img = document.createElement("img");
        img.src = imgdata;
        img.download = fileName;
        //imgdiv.appendChild(img);

        var aLink = document.createElement('a');
        aLink.innerHTML = "下载图片";
        if('download'in aLink){
            aLink.href = img.src;
            aLink.download = fileName;
        }else{
            var type = "image/png";
            var downloadMime = 'image/octet-stream';
            aLink.href =  img.src.replace(type, downloadMime);
        }
        //aLink.appendChild(img);
        imgdiv.appendChild(img);
        imgdiv.appendChild(aLink);

/*        var evt = document.createEvent("HTMLEvents");
        var aLink = document.createElement('a');
        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
       
        if('download'in aLink){
            aLink.href = img.src;
            aLink.download = fileName;
        }else{
            var type = "image/png";
            var downloadMime = 'image/octet-stream';
            aLink.href =  img.src.replace(type, downloadMime);
        }
        aLink.dispatchEvent(evt);
        aLink.appendChild(img);
        imgdiv.appendChild(aLink);*/

    }

    function downloadFile(aLink, fileName, content){
        aLink.download = fileName;
        aLink.href = "data:text/plain," + content;
    }

    function downloadFileNew(fileName, content){
        var aLink = document.createElement('a');
        var blob = new Blob([content]);
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.dispatchEvent(evt);
    }

    function is_weixn(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }

    function $(id){
       return document.getElementById(id);
    }

    function show(element){
      element.style.display = "block";
    }
                
    function hide(element){
      element.style.display = "none";
    }


    /*
    @function:计算两个时间之间的月份
    @Parameter:start:开始年月。end:结束年月
    @Date format:YYYY-MMM
    @return: 数字
    */
    function calcMouth(start,end){
/*      var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');*/
        //日期合法检测 任意格式转换
        var yearStart = Number(start.substr(0,4));
        var yearEnd = Number(end.substr(0,4));
        var monthStart = Number(start.substr(5));
        var monthEnd=  Number(end.substr(5));
        //var month = Math.floor(12-monthStart);
        var year = Math.floor(yearEnd-yearStart); //yearEnd.sub(yearStart.add(1));
        var mouthCount = 0;
        if(year==0){
            mouthCount = monthEnd - monthStart;
        }else if(year>0){
          mouthCount = year*12+monthEnd - monthStart;
        }
        return mouthCount;
    }

  (function() {
    var ie = !!(window.attachEvent && !window.opera);
    var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
    var fn = [];
    var run = function() {
      for (var i = 0; i < fn.length; i++) fn[i]();
    };
    var d = document;
    d.ready = function(f) {
      if (!ie && !wk && d.addEventListener) return d.addEventListener('DOMContentLoaded', f, false);
      if (fn.push(f) > 1) return;
      if (ie)(function() {
        try {
          d.documentElement.doScroll('left');
          run();
        } catch(err) {
          setTimeout(arguments.callee, 0);
        }
      })();
      else if (wk) var t = setInterval(function() {
        if (/^(loaded|complete)$/.test(d.readyState)) clearInterval(t),
        run();
      },
      0);
    };
  })();

  /*
* 智能机浏览器版本信息:
*
*/
  var browser={
    versions:function(){ 
           var u = navigator.userAgent, app = navigator.appVersion; 
           return {//移动终端浏览器版本信息 
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
            };
         }(),
         language:(navigator.browserLanguage || navigator.language).toLowerCase()
} 

</script>
</body>
</html>